<template>
  <div class="container-tag">
    <!-- 卡片视图 -->

    <el-card class="box-card">
      <!--  搜索部-->
      <div class="Hander_box">
        <el-row>
          <!--表单  -->
          <el-col :span="22">
            <el-form label-width="80px" inline size="small" v-model="reqParams" ref="dataForm">
              <el-form-item label="目录名称">
                <el-input placeholder="" v-model="reqParams.tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="reqParams.state" placeholder="请选择">
                  <el-option v-for="item in status" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="onClear()">清除</el-button>
                <el-button @click="onSearch" type="primary">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="2" cals="text-align: right">
            <el-button type="success" size="small" icon="el-icon-edit" class="addXueke" @click="addMulu">添加学科</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- alert警告 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon class="zAlert" style="margin-bottom: 15px"> </el-alert>
      <!-- table表格 -->
      <el-table :data="tagsList" style="width: 100%">
        <el-table-column label="序号" type="index" />

        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="目录名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{ scope.row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">{{ scope.row.state == 0 ? "已禁用" : "已启用" }}</template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="toggleState(scope.row)">
              <span v-if="scope.row.state == 0">启用</span>
              <span v-else-if="scope.row.state == 1">禁用</span>
            </el-link>

            <el-link type="primary" :disabled="scope.row.state == 0 ? false : true" @click="handleChange(scope.row)">修改</el-link>
            <el-link type="primary" :disabled="scope.row.state == 0 ? false : true" @click="delTags(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- tagsList.subjectName -->
      <!-- 分页 -->
      <el-pagination class="pager" background layout="prev, pager, next, sizes,jumper" :total="total" :page-size="reqParams.pagesize" :page-sizes="[5, 10, 20, 50]" :current-page="reqParams.page" @current-change="onCurrentChange" @size-change="onSizeChange"> </el-pagination>
      <!-- 修改弹窗 -->
      <el-dialog :title="titleInfo" :visible.sync="dialogVisible" width="22%">
        <!-- :rules="ruleInline" -->

        <el-form class="form_tion" size="mini" :model="addList" :rules="rules">
          <el-form-item label="所属学科">
            <el-select placeholder="" v-model="addList.subjectName" class="inpWidth">
              <el-option v-for="item in tagsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- //prop="tags" -->
          <el-form-item label="目录名称" prop="tagName">
            <el-input class="inpWidth" placeholder="搜索关键字" v-model="addList.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeTagok()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增弹窗 -->
      <el-dialog :title="titleInfo2" :visible.sync="addDialogVisible" width="22%">
        <el-form class="form_tion" size="mini" :model="newAddList" :rules="rules">
          <el-form-item label="请选择">
            <el-select placeholder="请选择" v-model="newAddList.subjectID" class="inpWidth">
              <el-option v-for="item in allXuekList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input class="inpWidth" placeholder="搜索关键字" v-model="newAddList.tagName"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTagsok">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove, update, add } from "@/api/hmmm/tags.js";
import { simple } from "@/api/hmmm/subjects.js";
import { status } from "@/api/hmmm/constants.js";

export default {
  components: { status },
  data() {
    return {
      status: status,
      dialogVisible: false,
      addDialogVisible: false,
      // /筛选参数
      reqParams: {
        tagName: "",
        page: 1, // 页码
        pagesize: 5, // 每页20条数据
        state: null,
      },
      //数据列表
      tagsList: [],
      total: 0, // 总条数
      titleInfo: "修改目录",
      titleInfo2: "新增目录",

      //修改表单
      addList: {
        id: "",
        subjectName: "",
        tagName: "",
        subjectID: "",
      },
      //所有学科列表
      allXuekList: [],
      //新增表单
      newAddList: {
        tagName: "",
        subjectID: "",
      },
      //验证
      rules: {
        tagName: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getTagsList();
  },
  methods: {
    //添加标签
    async addTagsok() {
      console.log(this.newAddList);
      const res = await add(this.newAddList);
      this.getTagsList();
      this.addDialogVisible = false;
    },
    async addMulu() {
      this.addDialogVisible = true;
      const res = await simple();
      this.allXuekList = res.data;
      // this.newAddList.subjectID = res.data.value;
      console.log(res);
    },
    async changeTagok() {
      const res = await update(this.addList);
      this.getTagsList();

      this.dialogVisible = false;
    },
    handleChange(row) {
      this.dialogVisible = true;
      this.addList.subjectName = row.subjectName;
      this.addList.id = row.id;
      this.addList.subjectID = row.subjectID;

      this.addList.tagName = row.tagName;
    },
    async getTagsList() {
      const res = await list(this.reqParams);
      console.log(res);

      this.total = res.data.counts;
      this.tagsList = res.data.items;
    },
    onCurrentChange(page) {
      this.reqParams.page = page;
      this.getTagsList();
    },
    onSizeChange(curPageSize) {
      this.reqParams.pagesize = curPageSize;
      this.reqParams.page = 1;
      this.getTagsList();
    },
    onClear() {
      this.reqParams.state = "";
      this.reqParams.tagName = "";
      this.getTagsList();
    },
    async onSearch() {
      console.log(this.reqParams);
      this.getTagsList();
    },
    async toggleState(row) {
      if (row.state == 0) {
        row.state = 1;
      } else if (row.state == 1) {
        row.state = 0;
      }
      const res = await changeState(row);
      this.getTagsList();
      this.$message.success("操作成功");
    },
    delTags(id) {
      this.$confirm("此操作将永久删除该学科, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove({ id });
          this.$message.success("删除成功！");
          this.getTagsList();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.container-tag {
  padding: 15px;
  .pager {
    margin-top: 15px;
    text-align: right;
  }
  .el-link {
    margin-right: 10px;
  }
  .form_tion {
    margin-left: 10%;
    margin-top: 1px;
  }
  .inpWidth {
    width: 230px;
  }
}
</style>
